<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="./template.js"></script>
</head>

<body>
    <h1>在javascript中存放模板</h1>
    <div id="content"></div>
    <script>
    var source = '<ul>'
    +    '{{each list as value i}}'
    +        '<li>索引 {{i + 1}} ：{{value}}</li>'
    +    '{{/each}}'
    + '</ul>';
    // 根据模板生成渲染函数；compile方法返回值是一个函数
    var render = template.compile(source);
    // render的作用就是用数据渲染静态标签内容
    var data = {
        list: ['摄影', '电影', '民谣', '旅行', '吉他']
    };
    var html = render(data);

    document.getElementById('content').innerHTML = html;
    </script>

</body>

</html>
